<template>
  <el-aside width="300px" class="right-sidebar">
    <!-- 用户信息卡 -->
    <el-card class="user-card">
      <div class="user-profile">
        <el-avatar :src="currentUser.avatar" :size="80" />
        <div class="user-info">
          <div class="user-header">
            <h3>{{ currentUser.name }}</h3>
            <el-tooltip content="退出登录" placement="top">
              <div class="logout-icon" @click="handleLogout">
                <component :is="LogOut" class="icon" />
              </div>
            </el-tooltip>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ currentUser.points }}</span>
              <span class="stat-label">积分</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ currentUser.posts }}</span>
              <span class="stat-label">发帖</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 精选推荐 -->
    <el-card class="hot-section">
      <template #header>
        <div class="section-header">
          <component :is="Sprout" class="icon" />
          <h3>精选推荐</h3>
          <el-button link @click="refreshRecommendations" class="refresh-btn">
            <component :is="RefreshCw" class="icon-xs" />
            换一批
          </el-button>
        </div>
      </template>
      <div class="recommend-list">
        <div v-for="post in recommendedPosts" :key="post.id" class="recommend-item">
          <h4 class="recommend-title" @click="viewPost(post.id)">{{ post.title }}</h4>
          <p class="recommend-excerpt">{{ post.excerpt }}</p>
          <div class="recommend-meta">
            <span class="author">{{ post.author }}</span>
            <div class="stats">
              <span class="likes">
                <component :is="ThumbsUp" class="icon"></component> {{ post.likes }}
              </span>
              <span class="comments">
                <component :is="MessageCircle" class="icon"></component>{{ post.comments }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 热门话题 -->
    <el-card class="hot-section">
      <template #header>
        <div class="section-header">
          <component :is="Flame" class="icon" />
          <h3>今日热门话题</h3>
        </div>
      </template>
      <div class="hot-tags">
        <el-tag v-for="tag in hotTags" :key="tag" class="hot-tag" effect="plain" @click="searchByTag(tag)">
          #{{ tag }}
        </el-tag>
      </div>
    </el-card>
    <!-- 新增：社区公告 -->
    <!-- <el-card class="hot-section">
      <template #header>
        <div class="section-header">
          <component :is="Bell" class="icon" />
          <h3>社区公告</h3>
        </div>
      </template>
      <div class="announcements">
        <div v-for="announcement in communityAnnouncements" :key="announcement.id" class="announcement-item">
          <h4 class="announcement-title">{{ announcement.title }}</h4>
          <p class="announcement-content">{{ announcement.content }}</p>
          <span class="announcement-date">{{ announcement.date }}</span>
        </div>
      </div>
    </el-card> -->
  </el-aside>
</template>

<script setup>
import { toRef, ref } from 'vue';
import { defineProps, onMounted, toRefs, defineEmits } from 'vue'
import {
  Recycle,
  Sprout,
  ShoppingBag,
  Home,
  Search,
  PlusCircle,
  ThumbsUp,
  MessageCircle,
  Share2,
  Loader2,
  Flame,
  Circle,
  RefreshCw,
  ArrowLeft,
  CheckSquare,
  Bell,
  LogOut
} from 'lucide-vue-next'

const props = defineProps({
  currentUser: {
    type: Object, 
    required: true, 
  },
  recommendedPosts: {
    type: Array, 
    required: true, 
  },
  hotTags: {
    type: Array, 
    required: true, 
  },
})

const emit = defineEmits(['logout'])

const { currentUser, recommendedPosts, hotTags } = toRefs(props)

// 新增：退出登录方法
const handleLogout = () => {
  emit('logout')
}

// 新增：每日任务数据
const dailyTasks = ref([
  { id: 1, description: "发表一篇帖子", completed: false },
  { id: 2, description: "回复5个帖子", completed: false },
  { id: 3, description: "给10个帖子点赞", completed: false },
]);

// 新增：社区公告数据
const communityAnnouncements = ref([
  { id: 1, title: "社区规则更新", content: "我们更新了社区规则，请大家遵守...", date: "2023-06-01" },
  { id: 2, title: "新功能上线", content: "我们推出了新的代码分享功能...", date: "2023-05-28" },
]);

// 新增：刷新推荐的方法
const refreshRecommendations = () => {
  console.log("刷新推荐");
  // 这里可以添加刷新推荐的逻辑
};

// 新增：查看帖子的方法
const viewPost = (postId) => {
  console.log("查看帖子", postId);
  // 这里可以添加查看帖子的逻辑
};

// 新增：按标签搜索的方法
const searchByTag = (tag) => {
  console.log("搜索标签", tag);
  // 这里可以添加按标签搜索的逻辑
};
</script>

<style scoped lang="scss">
$primary-color: #10b981;
$secondary-color: #3b82f6;
$text-color: #1f2937;
$border-color: #e5e7eb;
$background-color: #f8fafc;

.right-sidebar {
  padding: 24px 10px 0 10px;
  background: $background-color;

  .user-card {
    border-radius: 16px;
    margin-bottom: 24px;

    .user-profile {
      display: flex;
      align-items: center;
      gap: 20px;

      .user-info {
        flex: 1;
        
        .user-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          h3 {
            margin: 0;
            color: $text-color;
            font-size: 18px;
          }
          
          .logout-icon {
            cursor: pointer;
            padding: 6px;
            border-radius: 50%;
            transition: all 0.2s ease;
            
            &:hover {
              background-color: rgba($primary-color, 0.1);
              
              .icon {
                color: $primary-color;
              }
            }
            
            .icon {
              width: 18px;
              height: 18px;
              color: #6b7280;
            }
          }
        }

        .user-stats {
          display: flex;
          gap: 20px;

          .stat-item {
            text-align: center;

            .stat-value {
              display: block;
              font-size: 18px;
              font-weight: 600;
              color: $primary-color;
            }

            .stat-label {
              font-size: 12px;
              color: #6b7280;
            }
          }
        }
      }
    }
  }

  .hot-section {
    border-radius: 16px;
    margin-bottom: 24px;

    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;

      .icon {
        width: 20px;
        height: 20px;
        color: $primary-color;
      }

      h3 {
        margin: 0;
        font-size: 16px;
        color: $text-color;
        flex-grow: 1;
      }

      .refresh-btn {
        padding: 4px;
        font-size: 12px;

        .icon-xs {
          width: 14px;
          height: 14px;
        }
      }
    }

    .hot-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .hot-tag {
        border-radius: 6px;
        background: rgba($primary-color, 0.1);
        color: $primary-color;
        border: none;
        padding: 6px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: rgba($primary-color, 0.2);
        }
      }
    }
  }
}

.recommend-list {
  .recommend-item {
    padding: 12px 0;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    .recommend-title {
      margin: 0 0 8px 0;
      font-size: 14px;
      color: $text-color;
      cursor: pointer;
      transition: color 0.2s;

      &:hover {
        color: $primary-color;
      }
    }

    .recommend-excerpt {
      font-size: 12px;
      color: #666;
      line-height: 1.5;
      margin: 0 0 8px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .recommend-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;

      .author {
        color: #666;
      }

      .stats {
        display: flex;
        gap: 8px;

        span {
          display: flex;
          align-items: center;
          gap: 4px;
          
          .icon {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }
}
// 新增：社区公告样式
.announcements {
  .announcement-item {
    padding: 12px 0;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    .announcement-title {
      margin: 0 0 8px 0;
      font-size: 14px;
      color: $text-color;
      font-weight: bold;
    }

    .announcement-content {
      font-size: 12px;
      color: #666;
      margin: 0 0 8px 0;
    }

    .announcement-date {
      font-size: 11px;
      color: #999;
    }
  }
}
</style>

